<template>
	<view class="wanlgroups-user-container">
		<view class="wanlgroups-user-container__head" :style="{ height: headHeight + 'px' }">
			<view class="background" v-if="headerOpacity > 0" :style="{ height: headHeight + 'px', opacity: headerOpacity, backgroundColor: userData.color }" >
				<view class="bgcolor"></view>
			</view>
			<view class="navigater text-white" :style="{ height: headHeight + 'px', paddingTop: headTop + 'px' }" >
				<view class="text-xl">
					<view class="margin-right">
						<text class="wlIcon-fanhui1 text-bold" @tap="handleBack"></text>
					</view>
					<view class="text-cut" style="width: 100rpx;">
						<text class="text-lg" v-if="headerOpacity > 0" :style="{ opacity: headerOpacity }" >
							{{ formData.truename || userData.user.nickname }}
						</text>
					</view>
				</view>
				<view class="text-xl">
					<!-- <text class="wlIcon-fenxiangcopy margin-right-xl text-bold" @tap="showModal('share')" />
					<text class="wlIcon-gengduo text-bold" @tap="showModal('menu')" /> -->
				</view>
			</view>
		</view>
		<!-- 主体 -->
		<view class="wanlgroups-user-container__main" :style="{ backgroundColor: userData.color, backgroundImage: `url(${$wanlshop.oss( userData.image, 0, 50, 1, 'transparent', 'png' )})` }" >
			<view class="head text-white" :style="{ paddingTop: headHeight + 'px' }" @click="handleTheme" >
				<view class="userinfo">
					<view class="cu-avatar margin-right-bj round" :style="{ backgroundImage: `url(${$wanlshop.oss(userData.user.avatar, 88, 88)})` }" />
					<view>
						<view class="text-xl margin-bottom-xs">{{ formData.truename || userData.user.nickname}}</view>
						<view class="text-xs text-white-agba">
							<text>手机号码：</text>
							<text>{{ userData.user.username }}</text>
							<text class="wlIcon-fuzhi margin-left-sm" @click.stop="$wanlshop.copy(userData.user.username)" ></text>
						</view>
					</view>
				</view>
				<view class="margin-top-xl text-sm">
					<text>{{ userData.user.bio || '未留下任何个性签名' }}</text>
					<text v-if="isMyfind" class="wlIcon-jifen margin-left-xs" @click.stop="handleUserEdit" ></text>
				</view>
				<view class="findinfo margin-top">
					<view class="quantity">
						<view class="project" @tap.stop="$wanlshop.auth('/pages/user/record/domestic/border')" >
							<view class="text-lg"> {{ $wanlshop.toFormat(count.service.homeking, 'hundred') }} </view>
							<view class="text-xs text-white-agba">家政服务</view>
						</view>
						<view class="project" @tap.stop="$wanlshop.auth('/pages/user/record/medicalvisit/border')">
							<view class="text-lg"> {{ $wanlshop.toFormat(count.service.medicalvisit, 'hundred') }} </view>
							<view class="text-xs text-white-agba">医护上门</view>
						</view>
						<view class="project" @tap.stop="$wanlshop.auth('/pages/user/record/accompany/border')">
							<view class="text-lg"> {{ $wanlshop.toFormat(count.service.accompany, 'hundred') }} </view>
							<view class="text-xs text-white-agba">陪诊陪护</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="wanlgroups-user-container__list bg-white">
			<view class="questionbag" :style="{ top: `${headHeight}px` }">
				<view class="cu-list menu sm-border margin-top">
					<view class="cu-item arrow" @tap="$wanlshop.auth('/pages/user/record/domestic/border')">
						<view class="content">
							<text>家政服务</text>
						</view>
					</view>
					<view class="cu-item arrow" @tap="$wanlshop.auth('/pages/user/record/medicalvisit/border')">
						<view class="content">
							<text>医护上门</text>
						</view>
					</view>
					<view class="cu-item arrow" @tap="$wanlshop.auth('/pages/user/record/accompany/border')">
						<view class="content">
							<text>陪诊陪护</text>
						</view>
					</view>
					
					<view class="cu-item arrow" @tap="$wanlshop.auth('/pages/user/record/review')">
						<view class="content">
							<text>服务评价</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			formData: {
				truename: '', // 真实姓名
				idcard: '', // 身份证号码【限制18位】
				front_card_image: '', // 身份证正面照
				back_card_image: '', // 身份证反面照
				status:-1, // 0：待审核；1：通过；2：拒绝
			},
			headHeight: 0,
			headerOpacity: 0,
			headTop: 0,
			isMyfind: false,
			userData: {
				user_no: '',
				user: {
					avatar: '',
					nickname: '加载中..'
				},
				follow: 0,
				fans: 0,
				likes: 0,
				praised: 0,
				color: '#e9dacd',
				image: '',
				isFollow: 0
			},
			count: {
				user: {
					collect: 0,
					works: 0,
					browse: 0,
					comment: 0,
					goods: 0,
					groups: 0,
					homeking: 0,
					medicalvisit: 0,
					accompany: 0,
					nursing: 0,
					ddcar: 0,
					banks: 0,
					coupon: 0
				},
				service: {
					medicalvisit: 0,
					homeking: 0,
					accompany: 0
				}
			}
		};
	},
	computed: {
		...mapState(['common'])
	},
	onLoad(option) {
		// 计算页面尺寸
		let sys = this.$wanlshop.wanlsys();
		this.headTop = sys.top;
		this.headHeight = sys.height;
		this.loadData()
	},
	// 下拉刷新
	onReachBottom() {
		this.loadData();
	},
	methods: {
		sumObjectValues(obj) {  
		  let sum = 0;  
		  for (let key in obj) {  
			if (typeof obj[key] === 'object') {  
			  sum += this.sumObjectValues(obj[key]);  
			} else {  
			  sum += obj[key];  
			}  
		  }  
		  return sum;  
		},
		async loadData(data) {
			await uni.request({
				url: '/member/user/index_count',
				method: 'get',
				success: res => {
					this.count = res.data;
					let sum = this.sumObjectValues(res.data)
					this.$store.commit('statistics/setMessageNum', sum);
				}
			});
			await uni.request({
				url: '/wanlshop/find/user/userInfo',
				method: 'POST',
				data: data,
				success: res => {
					if (res.data.user_id === this.$store.state.user.id) {
						this.isMyfind = true;
					}
					this.userData = res.data;
				}
			});
			await uni.request({
				url: '/wanlshop/User/verifiedInfo',
				method: 'POST',
				success: res => {
					if(res.data) {
						this.formData = res.data;
						res.data.status = Number(res.data.status)
						if(res.data.status === 0) {
							this.msg = '您当前正在审核中,请耐心等待'
						} else if(res.data.status === 1) {
							this.msg = '审核已通过'
						} else if(res.data.status === 2) {
							this.msg = `审核未通过原因：${res.data.fail_reason}`
						}
					}
				}
			});
		},
		
		async handleTheme() {
			if (this.isMyfind) {
				uni.showActionSheet({
					itemList: ['从主题库选择背景', '从相册上传图片'],
					success: action => {
						if (action.tapIndex === 0) {
							this.$wanlshop.to('/pages/user/theme');
						} else if (action.tapIndex === 1) {
							uni.chooseImage({
								success: res => {
									uni.request({
										url: '/wanlshop/common/uploadData',
										success: updata => {
											uni.uploadFile({
												url: updata.data.uploadurl,
												filePath: res.tempFilePaths[0],
												name: 'file',
												formData:updata.data.storage == 'local'? null: updata.data.multipart,
												success: data => {
													this.editTheme({
														url: JSON.parse(data.data).data.url,
														type: 'upload'
													});
												},
												fail: error => {
													uni.showToast({title: JSON.parse(error.data).msg, icon: 'error', position: true});
												}
											});
										}
									});
								}
							});
						}
					}
				});
			}
		},
		async editTheme(data) {
			await uni.request({
				url: '/wanlshop/find/user/editTheme',
				method: 'POST',
				data: data,
				success: res => {
					this.userData.image = res.data.image;
					this.userData.color = res.data.color;
				}
			});
		},
		
		handleBack() {
			this.$wanlshop.back(1);
		},
		handleUserEdit() {
			this.$wanlshop.auth('/pages/user/setting/user');
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #ffffff;
}
.wanlgroups-user-container {
	&__head {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 9;

		.background {
			position: absolute;
			left: 0;
			right: 0;
			z-index: 1;

			.bgcolor {
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, 0.4);
			}
		}

		.navigater {
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: absolute;
			left: 0;
			right: 0;
			z-index: 9;
			padding-left: 25rpx;
			padding-right: 25rpx;
			/* #ifdef MP */
			padding-right: 220rpx;
			/* #endif */
			& > view {
				display: flex;
				align-items: center;
			}
		}
	}

	&__main {
		background-size: 100% auto;
		background-repeat: no-repeat;
		background-position-y: center;
		.text-white-agba {
			color: rgba(255, 255, 255, 0.9);
		}
		.head {
			padding: 0 30rpx;
			padding-bottom: 50rpx;
			background-color: rgba(0, 0, 0, 0.4);

			.userinfo {
				display: flex;
				align-items: center;
				.cu-avatar {
					width: 130rpx;
					height: 130rpx;
				}
			}

			.findinfo {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.quantity {
					display: flex;
					width: 100%;
					.project {
						display: flex;
						flex-direction: column;
						align-items: center;
						// width: 100rpx;
						width: calc(100% / 3);
						margin-right: 20rpx;
						overflow: hidden;
					}
				}
			}

			.shopinfo {
				display: flex;
				align-items: center;
				justify-content: space-between;
				&.solid-top {
					&::after {
						border-top: 1rpx solid rgba(255, 255, 255, 0.92);
					}
				}
				.cu-avatar {
					background-color: rgba(0, 0, 0, 0.1);
					width: 65rpx;
					height: 65rpx;
				}
				.subject {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.info {
						& > view {
							display: flex;
							align-items: center;
						}
					}
				}
			}
		}
	}

	&__list {
		margin-top: -30rpx;
		border-radius: 24rpx 24rpx 0 0;
		padding-top: 2rpx;
		.questionbag {
			position: -webkit-sticky;
			position: sticky;
			z-index: 99;
			margin: 0 16rpx;
		}
		.main {
			.empty {
				padding-top: 100rpx;
				display: flex;
				justify-content: center;
				image {
					width: 320rpx;
					height: 320rpx;
				}
			}
			.list {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				padding: 0 16rpx;
				justify-content: space-between;
				.item {
					margin-bottom: 40rpx;
					flex: 0 0 calc((100% - 16rpx) / 2);
					overflow: hidden;
					.examine {
						height: 460rpx;
						position: relative;
						.cover {
							height: 460rpx;
							background-size: cover;
							background-position: center;
							background-repeat: no-repeat;
						}
						.state {
							position: absolute;
							top: 0;
							right: 0;
							left: 0;
							bottom: 0;
							background-color: rgba(0, 0, 0, 0.2);
						}
					}
				}
			}
		}
	}

	&__modal {
		.praised {
			.cu-dialog {
				width: 70%;
				overflow: hidden;
				image {
					height: 100%;
				}
			}
		}
	}
}
</style>
